<template>
  <div id="app">
    <h1>向 DeepSeek 提问</h1>
    <QuestionForm @ask-question="handleQuestion" />
    <AnswerDisplay :answer="answer" :error="error" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import QuestionForm from './components/QuestionForm.vue';
import AnswerDisplay from './components/DeepSeekAnswerDisplay.vue';

const answer = ref('');
const error = ref('');

const handleQuestion = async (question) => {
  try {
    const response = await axios.post('http://localhost:5000/ask', {
      question: question
    });
    const data = response.data;
    if (data.error) {
      error.value = data.error;
      answer.value = '';
    } else {
      answer.value = data.answer;
      error.value = '';
    }
  } catch (e) {
    error.value = '请求出错，请稍后重试';
    answer.value = '';
  }
};
</script>

<style scoped>
/* 可以保留一些全局样式或者根据需要添加新样式 */
</style>